<template>
	<view class="box">
		 <view class="title">
			 <view class="icon" @click="lastMonth">
				 <image src="../../../static/images/left.png" mode="widthFix"></image>
			 	<!-- <u-icon name="arrow-left" color="#fff" size="15"></u-icon> -->
			 </view>
			<view class="dateObj" >
				{{dateObj.monthObj}}
				<!-- {{dateObj.year}}-{{dateObj.month}} -->
			</view>
			<view class="icon" @click="nextMonth">
				<image src="../../../static/images/right.png" mode="widthFix"></image>
				<!-- <u-icon name="arrow-right" color="#fff" size="24"></u-icon> -->
			</view>
		 </view>
		 <view class="week">
		 	<text v-for="(item,index) in weekArr" :key="index">{{item}}</text>
		 </view>
		 <view class="dayArr">
		 	<view class="dayItem" v-for="(item,index) in dayArr" :key="index" @click="selectDay(item)" >
				<view v-if="item.date==selectDayStr" class="active3">
					{{item.val}}
				</view>
				<view v-else-if="item.activeType" :class=" item.activeType==1 ? 'active1': 'active2'">
					{{item.val}}
				</view>
				<view v-else-if="!item.activeType">
					{{item.val}}
				</view>
		 	</view>
		 </view>
		
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				default : '',
				type  :String,
			},
		},
		data() {
			return {
				    weekArr: ['日', '一', '二', '三', '四', '五', '六'],
					dateObj:{
						year: '',
						month : '',
						monthObj : '',
						day : '',
						today: '',
					},
					selectDayStr: '',
					// thisMonthDays:[],//这个月天数
					dayArr:[],//页面渲染的天数
				    start_time:'',  //  月初的时间戳
				    end_time:'',    //  月末的时间戳
					historyDays : [],
			};
		},
		mounted() {
			this.init()
		},
		methods:{
			selectDay(_item){
				this.selectDayStr = _item.date
				this.$emit('selectDayEmit',_item)
			},
			// 签到过记录
			setHistoryDays(){
				console.log('执行了');
				if(this.historyDays.length){
					this.historyDays.forEach((item1,index1)=>{
						this.dayArr.forEach((item2,index2)=>{
							if(item2.thisMonth && item1 == item2.date){
								console.log('日期相等');
								item2.isActive = true
							}
						})
					})
				}
				
				
				
			},
			// 页面要渲染的天数
			getDayArr(_year,_month){
				let date = new Date();
				            let monthDayNum = new Date(_year, _month, 0).getDate();
				            // console.log(`当月天数${monthDayNum}`);
				
				            // 上个月余数
				            let lastMonthDayNum = new Date(_year, _month - 1, 0).getDate();
				            // console.log(`上月天数${lastMonthDayNum}`);
				
				            let adyArr = []
						
							// 当前月
							let thisMonthVal = (_month +'').padStart(2,'0')
							
				            for (let index = 1; index < monthDayNum + 1; index++) {
								let valIndex = (index + '').padStart(2,'0')
				                let day = {
				                    val: index,
				                    thisMonth: true,
									date : `${_year}-${thisMonthVal}-${valIndex}`
				                }
				                adyArr.push(day)
				            }
				
				
				            let monthFirtDay = new Date(`${_year}/${_month}/1`).getDay()
				                // console.log(`当月1号星期${monthFirtDay}`);
				
							let lastMonthYear
							let lastMonthMonth 
							if(_month==1){
								lastMonthYear = _year - 1
								lastMonthMonth = 12
							}else{
								lastMonthYear = _year 
								lastMonthMonth = (_month - 1 +'').padStart(2,'0')
							}
				
				
				            let lastMonthResidue = 0
				            if (monthFirtDay == 0) {
				                // 上个月没有剩余天数
				            } else {
				                lastMonthResidue = 7 - (7 - monthFirtDay)
				                for (let index = lastMonthDayNum; index > lastMonthDayNum - lastMonthResidue; index--) {
				                    let valIndex = (index + '').padStart(2,'0')
									let day = {
				                        val: index,
				                        thisMonth: false,
										date : `${lastMonthYear}-${lastMonthMonth}-${valIndex}`
				                    }
				                    adyArr.unshift(day)
				                }
				            }
				
				            let monthLastDay = new Date(`${_year}/${_month}/${monthDayNum}`).getDay()
				                // console.log(`当月${monthDayNum}号星期${monthLastDay}`);
				
				            // 下个月余数
				            let naxtMonthDayNum = new Date(_year, _month - 1, 0).getDate();
				            // console.log(`上月天数${lastMonthDayNum}`);
				
							let nextMonthYear
							let nextMonthMonth 
							// 不足两位补0处理
							if(_month==12){
								nextMonthYear = _year + 1 
								nextMonthMonth = 1
							}else{
								nextMonthYear = _year 
								nextMonthMonth = (_month+1+'').padStart(2,'0')
							}
				
				            let naxtMonthResidue = 0
				            if (monthLastDay == 6) {
				                // 下个月没有剩余天数
				            } else {
				                naxtMonthResidue = 7 - (monthLastDay + 1)
				                for (let index = 1; index < naxtMonthResidue + 1; index++) {
									let valIndex = (index + '').padStart(2,'0')
				                    let day = {
				                        val: index,
				                        thisMonth: false,
										date : `${nextMonthYear}-${nextMonthMonth}-${valIndex}`
				                    }
				                    adyArr.push(day)
				                }
				            }
							
							// console.log(this.dateObj.today);
							adyArr.forEach(item=>{
								if(item.date==this.dateObj.today){
									item.isToday = true
								}
							})
							
							this.dayArr = adyArr
							this.$emit('initData',{
								dayArr : this.dayArr,
								dateObj : this.dateObj
							})
							// console.log(this.dayArr);
			},
			lastMonth(){
				if(this.dateObj.month==1){
					this.dateObj.month = 12
					this.dateObj.year--
				}else{
					this.dateObj.month--
				}
				let month = this.dateObj.month.toString().padStart(2,'0')
				this.dateObj.monthObj = `${this.dateObj.year}-${month}`;
				this.getDayArr(this.dateObj.year,this.dateObj.month)
			},
			nextMonth(){
				if(this.dateObj.month==12){
					this.dateObj.month = 1
					this.dateObj.year++
				}else{
					this.dateObj.month++
				}
				let month = this.dateObj.month.toString().padStart(2,'0')
				this.dateObj.monthObj = `${this.dateObj.year}-${month}`;
				this.getDayArr(this.dateObj.year,this.dateObj.month)
			},
			init(){
				let date = new Date();
				date = new Date(date.getTime() + 24 * 60 * 60 * 1000); 
				this.dateObj.year = date.getFullYear();//
				let month = this.dateObj.month = date.getMonth() + 1;
				let day = this.dateObj.day = date.getDate();
				month = month.toString().padStart(2,'0')
				day = day.toString().padStart(2,'0')
				this.dateObj.today = `${this.dateObj.year}-${month}-${day}`;
				this.selectDayStr = this.dateObj.today
				this.dateObj.monthObj = `${this.dateObj.year}-${month}`;
				this.getDayArr(this.dateObj.year,this.dateObj.month)
			}
		},
		components:{
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
	.box{
		// padding: 0 20rpx;
	}
	.title{
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-bottom: 2rpx solid #e5e5e5;
		.dateObj{
			color: #111111;
			font-size: 34rpx;
		}
		.icon{
			display: grid;
			place-items: center;
			width: 50rpx;
			height: 50rpx;
			// background-color: #4089f0;
			border-radius: 50%;
			image{
				width: 100%;
			}
		}
	}
	.week{
		display: flex;
		color: #111;
		text{
			flex: 1;
			// width: 100rpx;
			height: 80rpx;
			display: grid;
			place-items: center;
			font-size: 30rpx;
		}
	}
	.dayArr{
		display: flex;
		flex-wrap: wrap;
		.dayItem{
			width: 14.2%;
			height: 80rpx;
			// background-color: red;
			display: grid;
			place-items: center;
			.active1{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #5ac725;
				display: grid;
				place-items: center;
				color: #fff;
			}
			.active2{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #79bbff;
				display: grid;
				place-items: center;
				color: #fff;
			}
			.active3{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #4089f0;
				display: grid;
				place-items: center;
				color: #fff;
			}
		}
	}
</style>
